<template>
  <div class="body">
  <catshit-header active-index="5"></catshit-header>
    <div  class="main" style="height: 700px">
      <el-tabs type="border-card" style="margin-top: 10px" v-model="activeName">
    <el-tab-pane label="景区管理" name="second">
      <el-table
        :data="spotData"
        stripe>
        <el-table-column prop="spotid" label="景点编号"></el-table-column>
        <el-table-column prop="spotname" label="景点名字"></el-table-column>
        <el-table-column prop="spotdial" label="联系方式"></el-table-column>
        <el-table-column prop="spotcapacity" label="景区容量"></el-table-column>
        <el-table-column prop="spotaddr" label="景区地址"></el-table-column>
        <el-table-column prop="spottype" label="景区类型"></el-table-column>
        <el-table-column  >
          <div slot="header">
            操作
            <span @click="addSpot()" size="small">添加</span>
          </div>
          <template slot-scope="scope">
            <el-button @click="deleteSpot(scope.row)" type="text" size="small">删除</el-button>
            <el-button @click="modifySpot(scope.row)" type="text" size="small">修改</el-button>
            <el-button @click="addSpotTicket(scope.row)" type="text" size="small">增加批次</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="人员管理" v-if="user_role==='2'" name="first">
      <el-table
        :data="peopleData"
        stripe>
        <el-table-column prop="userid" label="id"></el-table-column>
        <el-table-column prop="spotid" label="景点id"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column prop="name" label="名字"></el-table-column>
        <el-table-column prop="role" label="角色"></el-table-column>
        <el-table-column  label="操作">
          <div slot="header">
            操作
            <span @click="dialogVisible1=true" size="small">添加</span>
          </div>
          <template slot-scope="scope">
            <el-button @click="deletepeople(scope.row)" type="text" size="small">删除</el-button>
            <el-button @click="modifyPeopleVisible(scope.row)" type="text" size="small">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      >
      <div>
        <div>
         <label>景区名字</label> <el-input v-model="spotName.spotname"></el-input>
        </div>
        <div>
          <label>景区信息</label> <el-input v-model="spotName.spotinfo"></el-input>
        </div>
        <div>
          <label>景区地点</label> <el-input v-model="spotName.spotaddr"></el-input>
        </div>
        <div>
          <label>景区联系方式</label> <el-input v-model="spotName.spotdial"></el-input>
        </div>
        <div>
          <label>景区标签</label> <el-input v-model="spotName.spottype"></el-input>
        </div>
        <div>
          <label>景区容量</label> <el-input-number v-model="spotName.spotcapacity"></el-input-number>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addnewSpot">确 定</el-button>
  </span>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible1"
      width="30%"
    >
      <div>
        <div>
          <label>人员id</label> <el-input v-model="peopleInfo.userid"></el-input>
        </div>
        <div>
          <label>景区id</label> <el-input v-model="peopleInfo.spotid"></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible1 = false">取 消</el-button>
    <el-button type="primary" @click="addnewPeople">确 定</el-button>
  </span>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible2"
      width="30%"
    >
      <div>
        <div>
          <label>选择日期</label> <el-date-picker v-model="batchItem.date"  value-format="yyyy-MM-dd"></el-date-picker>
        </div>
        <div>
          <label>票数</label> <el-input-number v-model="batchItem.ticnum"></el-input-number>
        </div>
        <div>
          <label>价格</label> <el-input-number v-model="batchItem.price"></el-input-number>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible2 = false">取 消</el-button>
    <el-button type="primary" @click="addbatch()">确 定</el-button>
  </span>
    </el-dialog>
  </el-tabs>
    </div>
  </div>
</template>

<script>
  import Cookies from 'js-cookie'
    export default {
        name: "index",
      data(){
          return{
            activeName:'second',
            user_role:Cookies.get('user_role'),
            user_id:Cookies.get('user_id'),
            spotData:[],
            peopleData:[],
            dialogVisible:false,
            spotName:{
              'spotname':'',
              'spotinfo':'',
              'spotaddr':'',
              'spotdial':'',
              'spottype':'',
              'spotcapacity':0,
            },
            initDta:{},
            dialogVisible1:false,
            peopleInfo:{
              'spotid':'',
              'userid':'',
            },
            dialogVisible2:false,
            batchItem:{
              'spotid':'',
              'date':'2021-6-17',
              'ticnum':0,
              'price': 0
            }
          }
      },
      mounted() {
        this.getpeopleData()
        this.getsceneData()
        this.initData=this.spotName
      },
      methods:{
          getpeopleData(){
            this.$axios.post('/getuserlist').then(res=>{
              if(res.data.code){
                this.$message.error('出错了')
                return
              }
              this.peopleData=res.data.msg
              })
          },
        getsceneData(){
          this.$axios.post('/getspotlist').then(res=>{
            if(res.data.code){
              this.$message.error('出错了')
              return
            }
            this.spotData=res.data.msg
          })
        },
        deleteSpot(item){
          this.$axios.post('/deletespot', {spotid:item.spotid}
          ).then(res=>{
            if(res.data.code){
              this.$message.error('出错了')
              return
            }
            this.getsceneData()
          })

        },
        modifyPeopleVisible(item){
          this.peopleInfo=item;
          this.dialogVisible1=true
        },
        addSpot(){
          this.dialogVisible=true
        },
        modifySpot(item){
            if(item) {
            this.dialogVisible=true
            this.spotName=item
          }
            else{
              this.$axios.post('/modifyspot', this.spotName).then(res=>{
                if(res.data.code){
                  this.$message.error('出错了')
                  return
                }
                this.getsceneData()
                this.dialogVisible = false
              })
            }

        },
        addnewSpot(){
            if(this.spotName.spotid){
              this.modifySpot()
              return
            }
          this.$axios.post('/addspot', this.spotName).then(res=>{
            if(res.data.code){
              this.$message.error('出错了')
              return
            }
            this.getsceneData()
            this.dialogVisible = false
          })
        },
        deletepeople(item){
          this.$axios.post('/deletespotmanager',{
            'userid':item.userid,
          }).then(res=>{
            if(res.data.code){
              this.$message.error('出错了')
              return
            }
            this.$message.info('删除成功')
            this. getpeopleData()
          })

        },
        addnewPeople(){
          this.$axios.post('/addspotmanager',this.peopleInfo).then(res=>{
            if(res.data.code){
              this.$message.error('出错了')
              return
            }
            this.$message.info('修改成功')
            this.dialogVisible1=false
            this. getpeopleData()
          })
        },
        addbatch(){

          this.$axios.post('/addbatch',
            this.batchItem
          ).then(res=>{
            if(res.data.code!==0){
              this.$message.error(res.data.msg)
              return
            }
            this.$message.info('修改成功')
            this.dialogVisible2=false
          })

        },
        addSpotTicket(item){
          this.batchItem.spotid=item.spotid
          this.dialogVisible2=true
        },
      }
    }
</script>

<style scoped>
  .body{
    display: flex;
    background-color: aliceblue;
    justify-content: center;
  }
  .main{
    margin-top: 60px;
    width: 70%;
    background-color: white;
  }
  .carousel{
    margin:5px;
  }
  .under{
    display: flex;
  }
  .box-card{
    width: 100%;
    margin: 5px;
  }
  .box-card-right{
    width: 22%;
    margin: 5px;
  }
  .list{
    width: 100%;
  }
</style>
